<template>
	<view class="detail-ap">
		<!-- 切换导航栏 -->
		<view class="tabList">
			<v-tabs v-model="tabCurrent" :scroll="false" :tabs="tabList" @change="tabChange" ></v-tabs>	
		</view>
		<scroll-view scroll-y class="main" :scroll-top="scrollTop" @scroll="scroll">
			<view class="mian-title">
				<view class="xq_title">
					渣土车精准预警
				</view>
				<view class="xq_type">
					当前处置进度：{{ detailList.isClosed==0 ? nodeName : '处置完成' }}
				</view>
			</view>
			<swiper :current="tabCurrent" style="height: 80vh;" @change="changesw">
				<swiper-item class="swiper-item">
					<view class="forms">
						<view class="Category_title">
							<view class="line"></view>开单信息
						</view>
						<view class="items">
							<view class="field">
								类型
							</view>
							<view class="content">
								{{yjtype || '暂无' }}
							</view>
						</view>
						<view class="items">
							<view class="field">
								状态
							</view>
							<view class="content">
								{{detailList.isClosed==0 ?  '预警中':'预警解除' }}
							</view>
						</view>
						<view class="items">
							<view class="field">
								车牌
							</view>
							<view class="content">
								{{ getcarnumber || '暂无' }}
							</view>
						</view>
						<view class="items">
							<view class="field">
								地点
							</view>
							<view class="content" @click="navigationToEvent" style="color: #303133;" >
								{{address || '暂无' }}
							</view>
						</view>
						<view class="items">
							<view class="field">
								预警时间
							</view>
							<view class="content">
								{{yjtime || '暂无' }}
							</view>
						</view>
						<view class="items">
							<view class="field">
								图片
							</view>
							<view class="" style="display: flex; flex-wrap: wrap;">
								<view class="showpdf" v-for="item in imgs">
									<img class="pho" :src="item.url" @click="previewPic(item.url)" alt="">
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<circullog :ids="idd" :nodeName='nodeName' v-if="tabCurrent==1"></circullog>
				</swiper-item>
			</swiper>
		</scroll-view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		detailById
	} from '@/pages/api/orderp/orderp.js'
	import {
		getByOrdersId
	} from '@/pages/api/report/orderp.js'
	import {
		uploadUrl
	} from '@/pages/api/report/helperOrderp.js'
	import {
		mapState
	} from 'vuex'
	import methodMix from '@/pages/index/listCard/workorderList/methodMix_workorder.js'
	import circullog from '@/pages/index/listCard/circulLog/index.vue'
	export default {
		mixins: [methodMix],
		components: {
			circullog
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				picUrlList: [],

				id: '',
				detailList: {},
				show: false,
				showpart: false,
				showmap: false,
				closeable: false,
				type: 'textarea',
				autoup: false,
				border: true,
				height: 240,
				type_value: '',
				border_radius: '30rpx',
				orderType: '',
				nodeId: '',
				list: [],
				activelist: [],
				flag: false,
				idd: '',
				buttontype: 0,
				outorder: 0,
				detailmsg: {},
				checkop: '',
				action: 'http://47.96.237.231:8085/zhatu/file/upload',
				mode: 'range',
				tabList: ['预警详情','预警历史'],
				tabCurrent: 0,
				nodeName: '',
				stepsnumber: 0,
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				getcarnumber: '',
				yjtime: '',
				location: '',
				imgs: [],
				yjtype: '',
				address:''
			}
		},
		computed: {
			...mapState('enforce_law', ['infoItem']),
		},
		onLoad(op) {
			this.id = this.infoItem.recordId
			this.nodeId = this.infoItem.nodeId
			this.flag = this.infoItem.flag
			this.idd = this.infoItem.id
			this.nodeName = this.infoItem.nodeName
			console.log('历史不可修改', this.cricul, this.checkop, this.stepsnumber, this.idd)
		},
		mounted() {
			this.getdetailbyId()
		},
		methods: {
			getdetailbyId() {
				detailById({
					id: this.idd
				}).then(res => {
					console.log('详情', res)
					this.detailList = res
					this.orderType = this.detailList.orderType
					this.buttontype = this.detailList.type
					this.detailList.formValue.forEach(d => {
						if (d.display_name == '类型') {
							this.yjtype = d[d.name]
						}
						if (d.display_name == '车牌') {
							this.getcarnumber = d[d.name]
						}
						if (d.display_name == '时间') {
							this.yjtime = d[d.name]
						}
						if (d.display_name == '位置') {
							this.location = d[d.name]
							this.test.getRegeo({
								location:   parseFloat(this.location[0]) + ',' + parseFloat(this.location[1]) , //location的格式为'经度,纬度'
								success: (data)=> {
									console.log('地点',data[0].regeocodeData.formatted_address)
									this.address = data[0].regeocodeData.formatted_address
								}
							})
						}
						if (d.display_name == '图片') {
							this.imgs = d[d.name]
						}
					})
				})
			},
			scroll(e) {
				// console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			// 导航
			navigationToEvent() {
				this.test.getRegeo({
					location:   parseFloat(this.location[0]) + ',' + parseFloat(this.location[1]) , //location的格式为'经度,纬度'
					//成功回调
					success: (data)=> {
						console.log(data)
						uni.openLocation({
						    latitude: parseFloat(this.location[1]),
						    longitude: parseFloat(this.location[0]),
							name:data[0].name,
							address:data[0].regeocodeData.formatted_address,
						    success: function () {
						        console.log('success');
						    }
						});
					},
					fail: function(info) {
						//失败回调
						console.log(info)
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.detail-ap {
		height: 100vh;
		width: 750rpx;
		display: flex;
		flex-direction: column;

		.swiper-item {
			overflow-y: auto;
		}

		.main {
			flex: 1;
			overflow: hidden;
			width: 750rpx;
			background-color: #F2F3F5;
			// overflow-x: hidden;

			.mian-title {
				margin-top: 80rpx;
				padding: 32rpx;
				height: 96rpx;
				background-color: #FFFFFF;

				.xq_title {
					font-weight: 600;
					font-size: 40rpx;
					color: #363A44;
					margin-bottom: 24rpx;
				}

				.xq_type {
					font-size: 28rpx;
					color: #B5B7BA;
				}
			}

			.forms {
				// margin-top: 22rpx;
				padding: 26rpx 32rpx 26rpx 0rpx;
				width: 750rpx;
				background-color: #FFFFFF;
				border-radius: 10rpx;
				height: 100%;

				.Category_title {
					display: flex;
					font-weight: 600;
					font-size: 32rpx;
					color: #428FFC;
					height: 92rpx;
					background-color: #F6F7F8;
					line-height: 100rpx;
					padding-left: 32rpx;

					.line {
						height: 32rpx;
						margin: 32rpx 16rpx 0 0;
						width: 4rpx;
						background-color: #428FFC;
					}
				}

				.items {
					display: flex;
					padding: 26rpx 0 26rpx 0;
					font-size: 32rpx;
					margin-left: 32rpx;
					margin-right: 32rpx;
					border-bottom: 2rpx solid #E8E9EC;

					.field {
						width: 242rpx;
						color: #B3B5B9;
						margin-right: 8rpx;

						.showpdf {
							margin-top: 16rpx;
							padding: 10rpx;
							height: 200rpx;
							width: 200rpx;
							border: 1rpx solid #E8E9EC;
							border-radius: 10rpx;
							display: flex;
							justify-content: center;
							flex-wrap: wrap;
							align-items: center;
							position: relative;

							.pho {
								height: 200rpx;
								width: 200rpx;
								padding: 10rpx;
							}
						}
					}

					.content {
						width: 440rpx;
						color: #B3B5B9;
						// color: #363A44;
					}
				}

				.line {
					height: 5rpx;
					background-color: #F2F3F5;
				}
			}
		}

		.footer {
			display: flex;
			justify-content: center;

			width: 750rpx;
			height: 128rpx;
			background-color: #FFFFFF;

			box-shadow: 2rpx 0 6rpx rgba(0, 0, 0, .12), 0 0 6rpx rgba(0, 0, 0, .04);

			.heyan {
				height: 87rpx;
				width: 120rpx;
				border: 1rpx solid #428FFC;
				border-radius: 20rpx;
				font-size: 25rpx;
				color: #FFFFFF;
				background-color: #428FFC;
				margin-top: 14rpx;
				// margin-right: 5rpx;
				margin-left: 12rpx;
			}

			.chuzhi {
				height: 87rpx;
				width: 170rpx;
				border: 1rpx solid #428FFC;
				border-radius: 20rpx;
				font-size: 25rpx;
				color: #FFFFFF;
				background-color: #428FFC;
				margin-top: 14rpx;
				// margin-right: 5rpx;
				margin-left: 12rpx;
			}

			.cancel {
				height: 87rpx;
				width: 339rpx;
				font-size: 29rpx;
				border: 1rpx solid #428FFC;
				border-radius: 50rpx;
				color: #428FFC;
				margin-top: 14rpx;
				// margin-left: 32rpx;
			}

			.confim {
				height: 87rpx;
				width: 339rpx;
				font-size: 29rpx;
				border: 1rpx solid #428FFC;
				border-radius: 50rpx;
				background-color: #428FFC;
				color: #FFFFFF;
				margin-top: 14rpx;
				margin-left: 16rpx;
			}

			.taketask {
				height: 87rpx;
				width: 692rpx;
				line-height: 87rpx;
				border: 1rpx solid #428FFC;
				border-radius: 50rpx;
				background-color: #428FFC;
				color: #FFFFFF;
				margin-top: 14rpx;
			}
		}
	}

	.pop {
		height: 750rpx;
		border-radius: 20rpx;

		.pop_title {
			color: #363A44;
			font-size: 32rpx;
			padding: 40rpx 0 32rpx 32rpx;
			border-bottom: 1rpx solid #EFEFEF;
		}

		.title {
			padding: 20rpx;
			display: flex;
			justify-content: space-between;
		}

		.checkbox-group {
			padding: 20rpx;
		}
	}


	img {
		height: 180rpx;
		width: 180rpx;
		margin-right: 20rpx;
	}

	.tabList {
		height: 80rpx;
		width: 750rpx;
		z-index: 99;
		position: fixed;
		top: 0rpx;
		background-color: #FFFFFF;
		border-bottom: .5rpx solid #DBDBDB;
	}

	.arrow {
		margin-left: 50rpx;
		height: 30rpx;
		width: 30rpx;
	}

	.red_line {
		font-size: 20rpx;
		color: red;
		margin-left: 420rpx;
	}

	.person-list-panel {
		// min-height: 400rpx;
	}
</style>
